<template>
   <div class="twoHandShopDetail">
      <myHead title="二手市场"></myHead>
     <div class="top">
       <div class="left">
         <img :src="info.avatar" alt="">
       </div>
       <div class="right">
         <div class="nc">{{info.nickname}}</div>
         <div class="desc">
           <span>{{info.bio?info.bio:'暂无'}} </span>
           |
           <span>{{info.addtime}}</span>
         </div>
       </div>
     </div>
     <div class="titleTop">
       <div class="price">
         <div>￥{{info.price}}</div>
         <div>原价198运费待议</div>
       </div>
       <div class="name">{{info.title}}</div>
       <div class="address">
         <img src="../../../static/img/dingwei424.png" alt="">
         <span>西安财经</span>
       </div>
     </div>
     <div class="gray"></div>
     <div class="detail">
       <div class="detail_top">商品详情</div>
       <div class="detail_title">
         <div>
           <span>尺码:</span>
           <span>均码</span>
         </div>
         <div>
           <span>新旧程度:</span>
           <span>穿了两次</span>
         </div>
         <div>
           <span>有无破损：</span>
           <span>无破损</span>
         </div>
         <div>
           <span>面料:</span>
           <span>纯棉</span>
         </div>
         <div>
           <span>交易方式:</span>
           <span>自提、邮寄</span>
         </div>
       </div>
       <div class="detail_detail">
         <div class="text">{{info.content}}</div>
         <div class="Img">
           <img src="../../../static/img/es2.png" alt="">
         </div>
         <div class="Img">
           <img src="../../../static/img/es2.png" alt="">
         </div>
       </div>
       <div class="desc">
         <span>1人想要 </span>
         |
         <span>  104次浏览 </span>
       </div>
     </div>
     <div class="gray"></div>
     <div class="about">
       <div class="title">关于卖家</div>
       <div class="salePeople">
         <div class="left">
           <img src="../../../static/img/uhead.jpg" alt="">
         </div>
         <div class="right">
           <div class="nc">Anner</div>
           <div class="desc">
             <span>学习使我快乐 </span>
             |
             <span>10分钟前来过</span>
           </div>
         </div>
<!--         <van-icon name="arrow" color="#999999" size="16" />-->
       </div>
       <div class="number">
         <div>
           <div class="num">236</div>
           <div class="num">在售宝贝</div>
         </div>
         <div>
           <div class="num">236</div>
           <div class="num">累计交易</div>
         </div>
         <div>
           <div class="num">50%</div>
           <div class="num">回复率</div>
         </div>
       </div>
     </div>
<!--     <div class="gray"></div>-->
<!--     <div class="commit">-->
<!--       <div class="title">留言(12)</div>-->
<!--       <div class="commitBox">-->
<!--         <div class="commitTop">-->
<!--           <div class="commitImg">-->
<!--             <img src="../../../static/img/uhead.jpg" alt="">-->
<!--           </div>-->
<!--           <div>-->
<!--             <div class="nc">提篮看故人</div>-->
<!--             <div class="content">包邮吗？有其他颜色吗？</div>-->
<!--             <div class="time">2小时前</div>-->
<!--           </div>-->
<!--         </div>-->
<!--         <div class="replay">-->
<!--           <div class="commitTop">-->
<!--             <div class="commitImg">-->
<!--               <img src="../../../static/img/uhead.jpg" alt="">-->
<!--             </div>-->
<!--             <div>-->
<!--               <div class="nc">提篮看故人<span class="master">主人</span></div>-->
<!--               <div class="content">包邮吗？有其他颜色吗？</div>-->
<!--               <div class="time">2小时前</div>-->
<!--             </div>-->
<!--           </div>-->
<!--         </div>-->
<!--       </div>-->
<!--       <div class="commitBox">-->
<!--         <div class="commitTop">-->
<!--           <div class="commitImg">-->
<!--             <img src="../../../static/img/uhead.jpg" alt="">-->
<!--           </div>-->
<!--           <div>-->
<!--             <div class="nc">提篮看故人</div>-->
<!--             <div class="content">包邮吗？有其他颜色吗？</div>-->
<!--             <div class="time">2小时前</div>-->
<!--           </div>-->
<!--         </div>-->
<!--       </div>-->
<!--     </div>-->
     <div class="fixed">
       <div class="collect">
<!--         <img src="../../../static/img/tz3.png" alt="">-->
<!--         <span>30</span>-->
       </div>
<!--       <div class="collect" @click="commit=true">-->
<!--         <img src="../../../static/img/tz2.png" alt="">-->
<!--         <span>30</span>-->
<!--       </div>-->
       <div class="btn">
         <div class="buy" @click="buy()">立即抢购</div>
       </div>
     </div>
     <div class="com-ft" v-if="commit">
       <div class="inp">
         <input type="text" placeholder="发表评论">
       </div>
       <div class="com-ft-btn">发表</div>
       <div class="com-ft-btn red" @click="commit=false">取消</div>
     </div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"
    import Vue from 'vue';
    import { Icon } from 'vant';
    import {formatDate} from "../../methods/time";

    Vue.use(Icon);

    export default {
        name: "twoHandShopDetail",
        components: {
            myHead
        },
        filters: {
          formatDate(time) {
            time = time * 1000;
            let date = new Date(time);
            return formatDate(date, 'yyyy/MM/dd')
          }
        },
        data() {
          return {
            commit:false, // 商品详情
            info:false
          }
        },
      created() {
        this.$myAxios('index/Classify/headline_used_details', 'post',{
          user_id:this.$myStorage.query(),
          sid:this.$route.query.id
        }).then(res => {
          console.log(res);
          if(res.data.state){
            this.info = res.data.headline_used
          }
        });
      },
      methods : {
        buy(){
          this.$router.push({
            path:"/views/Client/confirmTwoHandsOrder",
            query:{id:this.$route.query.id}
          })
        }
      }
    }
</script>
<style scoped>
  .twoHandShopDetail{
    padding: .5rem 0 ;
  }
  . twoHandShopDetail .gray{
    height: .1rem;
    width: 100%;
    background-color: #F5F5F5;
  }
  .twoHandShopDetail .top{
    display: flex;
    padding: .12rem .16rem;
    align-items: center;
    border-bottom: 1px solid #F5F5F5;
  }
  .twoHandShopDetail .left{
    width: .32rem;
    height: .32rem;
    margin-right: .1rem;
    border-radius: .04rem;
    overflow: hidden;
  }
  .twoHandShopDetail .nc{
    font-size: .15rem;
    color: #333333;
  }
  .twoHandShopDetail .desc{
    color: #999999;
    font-size: .12rem;
  }
  .twoHandShopDetail .titleTop{
    padding: .15rem .18rem .1rem;
  }
  .twoHandShopDetail .titleTop .price{
    display: flex;
    color: #FF0101;
    font-size: .18rem;
    align-items: flex-end;
  }
  .twoHandShopDetail .titleTop .price div:nth-child(2){
    color: #999999;
    font-size: .12rem;
    text-decoration:line-through;
    line-height: .2rem;
    margin-left: .1rem;
  }
  .twoHandShopDetail .titleTop .name{
    font-size: .15rem;
    color: #333333;
    margin: .05rem 0 .08rem;
  }
  .twoHandShopDetail .titleTop .address{
    display: flex;
    align-items: flex-end;
    color: #999999;
    font-size: .13rem;
  }
  .twoHandShopDetail .titleTop .address img {
    width: .16rem;
    margin-right: .1rem;
  }
  .twoHandShopDetail .detail{
    padding: .1rem;
  }
  .twoHandShopDetail .detail .detail_top{
    color: #333333;
    font-size: .15rem;
  }
  .twoHandShopDetail .detail .detail_title{
    display: flex;
    flex-wrap: wrap;
    padding: .05rem 0;
  }
  .twoHandShopDetail .detail .detail_title div{
    width: 50%;
    color: #999999;
    font-size: .14rem;
    padding: .02rem 0;
  }
  .twoHandShopDetail .detail .detail_title div span:nth-child(2){
    color: #333333;
  }
  .twoHandShopDetail .detail .detail_detail .text{
    font-size: .14rem;
    color: #333333;
  }
  .twoHandShopDetail .detail .detail_detail .Img{
    margin: .05rem 0;
  }
  .twoHandShopDetail .detail .desc{
    text-align: right;
    padding: .02rem 0;
  }
  .twoHandShopDetail .title{
    font-size: .16rem;
    color: #333333;
  }
  .twoHandShopDetail .about{
    padding: .13rem .18rem;
  }
  .twoHandShopDetail .about .salePeople{
    display: flex;
    padding: .12rem 0;
    align-items: center;
    border-bottom: 1px solid #F5F5F5;
  }
  .twoHandShopDetail .about .salePeople .right{
    flex-grow: 1;
  }
  .twoHandShopDetail .about .number{
    display: flex;
    background-color: #F5F5F5;
    justify-content: space-between;
    padding: .08rem .3rem;
    text-align: center;
  }
  .twoHandShopDetail .about .number .num{
    font-size: .16rem;
    color: #333333;
  }
  .twoHandShopDetail .about .number .num:nth-child(2){
    color: #999999;
    font-size: .12rem;
  }
  .twoHandShopDetail .commit{
    padding: .1rem .17rem;
  }
  .twoHandShopDetail .commit .commitBox{
    border-bottom: 1px solid #F5F5F5;
    padding: .1rem 0;
  }
  .twoHandShopDetail .commit .commitBox .commitTop{
    display: flex;
    padding-bottom: .1rem;
  }
  .twoHandShopDetail .commit .commitBox .commitTop .commitImg{
    width: .3rem;
    height: .3rem;
    margin-right: .06rem;
  }
  .twoHandShopDetail .commit .commitBox .content{
    font-size: .13rem;
    color: #333333;
    padding: 0.06rem 0 .04rem;
  }
  .twoHandShopDetail .commit .commitBox .nc{
    padding-top: .12rem;
  }
  .twoHandShopDetail .commit .commitBox .nc .master{
    color: #FF6E00;
    border: 1px solid #FF6E00;
    border-radius: .05rem;
    font-size: .12rem;
    padding: 0 .04rem;
    margin-left: .1rem;
  }
  .twoHandShopDetail .commit .commitBox .time{
    font-size: .12rem;
    color: #999999;
  }
  .twoHandShopDetail .commit .commitBox .replay{
    border-top: 1px solid #F5F5F5;
    padding: .1rem 0 0;
    margin-left: .4rem;
  }
  .twoHandShopDetail .fixed{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .5rem;
    box-shadow:0.05rem 0.02rem 0.07rem 0.01rem rgba(140,140,140,0.24);
    background-color: #ffffff;
    display: flex;
    align-items: center;
  }
  .twoHandShopDetail .fixed .collect{
    display: flex;
    align-items: center;
    margin-left: .2rem;
  }
  .twoHandShopDetail .fixed .collect img{
    width: .18rem;
    margin-right: .04rem;
  }
  .twoHandShopDetail .fixed .btn{
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: .2rem;
  }
  .twoHandShopDetail .fixed .btn .buy{
    width: .78rem;
    height: .26rem;
    color: #ffffff;
    background-color: #FF1D1D;
    font-size: .12rem;
    text-align: center;
    line-height: .26rem;
    border-radius: .13rem;
  }
  .com-ft {
    width: 100%;
    height: .5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 88;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 .15rem;
  }
  .inp {
    width:2.63rem;
    height:.32rem;
    background:rgba(246,246,246,1);
    border-radius:.04rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 .1rem;
    position: relative;
  }
  .inp>img {
    width: .2rem;
    height: .2rem;
  }
  .inp>input {
    outline: none;
    border: none;
    background-color: rgba(246,246,246,1);
  }
  .com-ft-btn {
    width:.5rem;
    height:.25rem;
    background:rgba(255,139,60,1);
    border-radius:.04rem;
    color: #ffffff;
    font-size:.12rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    text-align: center;
    line-height: .25rem;
    margin: 0 0 0 .1rem;
  }
  .red{
    background-color: #FF1D1D;
  }
</style>
